<template>
    <div id="tmpl">
        <mt-header fixed title="看会儿美女">
            <router-link to slot="left">
                <mt-button icon="back" @click="$router.back(-1)"></mt-button>
                <!-- 返回上一页 -->
            </router-link>
        </mt-header>
        <!-- 内容区域 -->
        <div class="content-box">
            <div class="mui-content">
                <mt-swipe :auto="0" id="swiper-box" :show-indicators="false">
                    <mt-swipe-item class="box" v-for="(item, index) in PhotoList" :key="index">
                        <img
                            class="item-pic"
                            :src="item.img"
                            :id="item.id"
                            alt="meitu"
                            ref="abc"
                            onerror="this.onerror=null; this.parentNode.className +=' none'; this.src='http://woxin2.jx139.com/cztx/images/ic_default_head.png'"
                        />
                    </mt-swipe-item>
                </mt-swipe>
                <!-- 传值比获取数据要快一步，所以 -->
                <comment-box class="comments" v-if="this.id != ''" :id="this.id"></comment-box>
                <!-- 评论列表 -->
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from "mint-ui";
import comment from "../../components/subcomponents/comment.vue";
// common 方法引入公共路径的方法
import common from "../../kits/common.js";
// v-if="item.url != undefined"
export default {
    data() {
        return {
            PhotoList: [],
            box_height: 0,
            pic_height: 0,
            id: ""
        };
    },
    mounted() {
        this.setBoxHeight();
    },
    beforeUpdate() {
        this.setPicHeight();
    },
    methods: {
        getimgs() {
            // 实现轮播组件中的数据请求
            // 1. 确定  url
            let url = this.$api + "/getImages";
            console.log(this.$api)
            let arr = []; // 定义图片数组
            // 2. 调用  $http.get()
            this.$http.get(url).then(function(res) {
                let data = res.body;
                if (data.code != 200) {
                    Toast({
                        message: data.message,
                        position: "middle", // top middle bottom
                        duration: 2000
                    });
                    return; // 报错之后阻断后面代码运行
                } else {
                    Toast({
                        message: "数据加载" + data.message,
                        position: "middle", // top middle bottom
                        duration: 2000 // 消息显示时间
                    });
                }
                // 如果服务器返回的数据正常，则赋值给 list
                for (var i = 0; i < data.result.length; i++) {
                    if (data.result[i].img.indexOf("7xi8d6.com1") == -1) {
                        arr.push(data.result[i]);
                        if (arr.length == 10) {
                            break;
                        }
                    }
                }
                this.PhotoList = arr;
                this.id = data.result[0].id;
            });
        },
        setBoxHeight(e) {
            this.box_height = document.documentElement.clientHeight - 90;

            document.getElementById("swiper-box").style.height =
                this.box_height + "px";
        },
        setPicHeight() {
            let items = document.getElementById("swiper-box").children[0];

            items.style.lineHeight = this.box_height + "px";
        }
    },
    created() {
        // 当页面中的 data 和 methods 对象都创建完毕后，就会自动调用 created
        this.getimgs();
    },
    // mounted: function() {
    //     // debugger;
    // },
    compiled: function() {
        // console.log(this.PhotoList);
    },
    components: {
        // 注册子组件的节点
        "comment-box": comment
    }
};
</script>
<style lang="less" scoped>
#swiper-box {
    background: url("../../imgs/bg-flower.jpg");
}
.box {
    /* border: 1px dashed #ccc; */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
img {
    width: 100%;
    vertical-align: middle;
}
#tmpl .comment-container {
    height: auto;
}
// .comments{
// width: 35px;
// height: 100px;
// background-color: red;
// position: fixed;
// right: 30px;
// bottom: 100px;
// border-radius: 50%;
// }
</style>

